<template>
    <a-card :bordered="false">
        <div class="card-title">{{ $route.meta.title }}</div>

        <div class="table-operator">
            <!-- 搜索板块 -->
            <a-row class="row-item-search">
                <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
                    <a-form-item label="手机号码">
                        <a-input v-decorator="['satisfaction_userphone']" placeholder="请输入手机号码" />
                    </a-form-item>
                    <a-form-item class="search-btn">
                        <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
                    </a-form-item>
                </a-form>
            </a-row>
        </div>


        <!-- 表板块 -->
        <s-table
                ref="table"
                rowKey="satisfaction_id"
                :loading="isLoading"
                :columns="columns"
                :data="loadData"
                :pageSize="15"
                :scroll="{ x: 1450 }"
        >

        </s-table>
    </a-card>
</template>

<script>
    import { ContentHeader, STable } from '@/components'
    import * as SatisfactionApi from '@/api/satisfaction/index'
    // 表格表头
    const columns = [
        {
            title: 'ID',
            width: '50px',
            dataIndex: 'satisfaction_id'
        },
        {
            title: '评价人',
            dataIndex: 'satisfaction_user',
            width: '100px',
            scopedSlots: { customRender: 'satisfaction_user' }
        },
        {
            title: '评价人手机',
            dataIndex: 'satisfaction_userphone',
            width: '100px',
            scopedSlots: { customRender: 'satisfaction_userphone' }
        },
        {
            title: '整体感受',
            dataIndex: 'satisfaction_all',
            width: '100px',
            scopedSlots: { customRender: 'satisfaction_all' }
        },
        {
            title: '预约和等待时间',
            dataIndex: 'satisfaction_time',
            width: '100px',
            scopedSlots: { customRender: 'satisfaction_time' }
        },
        {
            title: '价格透明',
            width: '100px',
            dataIndex: 'satisfaction_price',
            scopedSlots: { customRender: 'satisfaction_price' }
        },
        {
            title: '服务态度',
            dataIndex: 'satisfaction_attitude',
            width: '100px',
            scopedSlots: { customRender: 'satisfaction_attitude' }
        },
        {
            title: '患者沟通',
            width: '100px',
            dataIndex: 'satisfaction_chat',
            scopedSlots: { customRender: 'satisfaction_chat' }
        },
        {
            title: '诊疗质量',
            width: '100px',
            dataIndex: 'satisfaction_treatment',
            scopedSlots: { customRender: 'satisfaction_treatment' }
        },
        {
            title: '器械消毒',
            width: '100px',
            dataIndex: 'satisfaction_xiaodu',
            scopedSlots: { customRender: 'satisfaction_xiaodu' }
        },
        {
            title: '环境卫生',
            width: '100px',
            dataIndex: 'satisfaction_weisheng',
            scopedSlots: { customRender: 'satisfaction_weisheng' }
        },
        {
            title: '评价时间',
            width: '100px',
            dataIndex: 'create_time'
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            fixed: 'right',
            scopedSlots: { customRender: 'action' }
        }
    ]
    export default {
        name: 'Index',
        components: {
            ContentHeader,
            STable
        },

        data () {
            return {
                expand: false,
                // 表头
                columns,
                // 正在加载
                isLoading: false,
                queryParam: {},
                searchForm: this.$form.createForm(this),
                loadData: param => {
                    return SatisfactionApi.list({ ...param, ...this.queryParam })
                        .then(response => {
                            return response.data.list
                        })
                }
            }
        },
        methods:{
            // 确认搜索
            handleSearch (e) {
                e.preventDefault()
                this.searchForm.validateFields((error, values) => {
                    if (!error) {
                        this.queryParam = { ...this.queryParam, ...values }
                        this.handleRefresh(true)
                    }
                })
            },
            /**
             * 刷新列表
             * @param Boolean bool 强制刷新到第一页
             */
            handleRefresh (bool = false) {
                this.$refs.table.refresh(bool)
            }
        }
    }
</script>